<!--
 * @Author: 码上talk|RC
 * @Date: 2021-09-04 23:06:33
 * @LastEditTime: 2021-10-04 15:19:40
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/components/upgrading-tip/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <div class="upgrading-tip" v-if="isUpgradingTipShow">
    <template v-if="mode===1">
      <image class="update-template" :src="'upgrading-tip/2021-09-06.png'| prefixOssUrl" />
    </template>
    <template v-if="mode===2">
      <view class="update-log">
        <image :src="'upgrading-tip/update-log.png' | prefixOssUrl " />
        <view class="main">
          <view class="title">
            更新日志
            <image :src="'upgrading-tip/right-arrow.png' | prefixOssUrl " />
          </view>
          <view class="version-text">v{{ update.info.version }}更新内容</view>
          <view class="content">
            <view class="c-title">更新内容：</view>
            <rich-text class="rich-text" :nodes="update.info.contentNew"></rich-text>
            <view class="c-title">修复内容：</view>
            <rich-text class="rich-text" :nodes="update.info.contentFixed"></rich-text>
          </view>
        </view>
      </view>
      <image class="icon-close" :src="'upgrading-tip/close.png' | prefixOssUrl " @tap="isUpgradingTipShow = false" />
    </template>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  // mode -> 1更新模板， 2->更新日志
  export default {
    props: ['mode'],
    data() {
      return {
        isUpgradingTipShow: true
      }
    },
    computed: {
      ...mapState('sys', ['update']),
    },
  }
</script>

<style lang="less">
  .upgrading-tip {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: RGBA(0, 0, 0, 0.3);
    z-index: 9999;

    .update-template {
      width: 633rpx;
      height: 983rpx;
    }

    .update-log {
      image {
        display: block;
        width: 560rpx;
        height: 300rpx;
      }

      .main {
        padding: 58rpx 76rpx 0;
        width: 408rpx;
        height: 442rpx;
        background-color: #fff;
        overflow-y: auto;

        .title {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 38rpx;
          font-weight: bold;
          color: #333;

          image {
            margin-left: 15rpx;
            width: 51rpx;
            height: 14rpx;
          }
        }

        .version-text {
          margin: 15rpx 0;
          font-size: 28rpx;
          color: #999;
        }

        .content {
          padding-bottom: 58rpx;
          .c-title {
            margin-top: 15rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #333;
          }
          .rich-text {
            font-size: 28rpx;
            font-weight: 400;
            color: #666;
          }
        }
      }
    }

    .icon-close {
      position: absolute;
      bottom: 69rpx;
      width: 68rpx;
      height: 68rpx;
      z-index: 99999;
    }
  }
</style>